<template>
	<view class="tabPage">
		<view :class="tabAction=='tabItem1'?'tabAction':''" @click="tabChange('item1')">
			<text>我是出租方</text>
			<uni-badge class="uni-badge-left-margin slTip" />
		</view>
		<view :class="tabAction=='tabItem2'?'tabAction':''" @click="tabChange('item2')">
			<text>我是承租方</text>
			<uni-badge class="uni-badge-left-margin slTip" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "nsrBar",
		data() {
			return {
				tabAction: "tabItem1",
				nsrlx:"0",
			};
		},
		props: {
			// 默认
			tabActionMr: {
				type: String,
				default:""
		
			},
		},
		watch: {
			tabActionMr: {
				handler(newVal, oldVal) {
					if(newVal){
						this.tabAction = newVal
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			// 切换tab页 
			async tabChange(data) {
				if (data == 'item1' && this.tabAction != "tabItem1" && this.nsrlx!="0") {
					this.tabAction = "tabItem1"
					this.nsrlx = "0"
					this.$emit("nsrGX",this.nsrlx)
				}
				if (data == 'item2' && this.tabAction != "tabItem2"&& this.nsrlx!="1") {
					this.tabAction = "tabItem2"
					this.nsrlx = "1"
					this.$emit("nsrGX",this.nsrlx)
				}
			},
		}
	}
</script>

<style>
	.tabPage {
		display: flex;
		height: 90rpx;
		font-size: 30rpx;
	}

	.tabPage>view {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		flex: 1;
		background: #007aff57;
		color: #ffffff;
	}

	.tabPage .slTip {
		position: relative;
		bottom: 20rpx;
	}

	.tabPage .tabAction {
		color: black;
		background: #ffffff;
		font-weight: bold;
	}
</style>